<template>
  <div class="zTreeDemoBackground zTreeLeft">
    <div class="el-loading-mask" style="" id="Loading">
      <div class="el-loading-spinner">
        <svg viewBox="25 25 50 50" class="circular">
          <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
        </svg>
      </div>
    </div>
    <ul id="treeDemo" class="ztree"></ul>
  </div>
</template>

<script>
import { getToken, getWebsiteId } from '@/utils/auth'
import request from '@/utils/request.js'
export default {
  name: 'zTree',
  data: function() {
    return {
      setting: {
        data: {
          simpleData: {
            enable: true
          }
        },
        check: {
          enable: true,
          autoCheckTrigger: true
        },
        view: {
          dblClickExpand: false,
          expandSpeed: ''
        },
        callback: {
          onAsyncSuccess: this.onAsyncSuccess,
          onExpand: this.zTreeOnExpand, // 加号展开
          onCheck: this.onCheck,
          onClick: this.onClick,
          onAsyncError: this.onAsyncError
        },
        async: {
          enable: true,
          type: 'post',
          url: '/v1/datac/app/datacDeptment/getNextChildDeptment',
          autoParam: ['groupId', 'id=node'],
          otherParam: {
            groupId: '1',
            projectId: this.getsiteId,
            scope: getWebsiteId(),
            token: getToken()
          },
          dataFilter: this.dataFilter
        }
      },
      zNodes: [],
      node: '',
      projectId: '',
      allCheckedIds: [],
      halfCheckIds: [],
      listLeafDepts: [],
      listDepts: []
    }
  },
  watch: {
    projectId(val) {
      this.projectId = val
    }
  },
  methods: {
    // 加载loading
    initPage() {
      const objLoading = document.getElementById('Loading')
      objLoading.style.display = 'block'
    },
    // 获取数据处理数据
    dataFilter(treeId, parentNode, childNodes) {
      this.allCheckedIds= this.listDepts = childNodes.data.listDepts
      this.halfCheckIds = this.listLeafDepts = childNodes.data.listLeafDepts
      if (parentNode.checkedEx === true) {
        childNodes.data.resList.map(item => {
          item.checked = parentNode.checked
          item.halfCheck = false
          item.checkedEx = true
        })
      }
      return childNodes.data.resList
    },

    // 获取站点id
    getsiteId() {
      return this.projectId
    },
    // 点击加号展开
    zTreeOnExpand(event, treeId, treeNode) {
      this.node = treeNode.id || ''
    },
    // 点击名称展开
    onClick(e, treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj('treeDemo')
      zTree.expandNode(treeNode)
    },
    // 获取选择的数据
    onCheck(event, treeId, treeNode) {
      this.cancelHalf(treeNode)
      treeNode.checkedEx = true
      var zTree = $.fn.zTree.getZTreeObj('treeDemo')
      var nodes = zTree.getCheckedNodes()
      let allChecked = [],
        halfChecked = []
      nodes &&
        nodes.length > 0 &&
        nodes.map(item => {
          if (item.getCheckStatus().half != true) {
            item && item.id && allChecked.push(item.id)
          } else {
            item && item.id && halfChecked.push(item.id)
          }
        })
      halfChecked.push(...this.listLeafDepts)
      if (treeNode.id) {
        this.listDepts = this.listDepts.filter(item => {
          return item !== treeNode.id
        })
      }
      allChecked.push(...this.listDepts)
      this.allCheckedIds = [...new Set(allChecked)]
      this.halfCheckIds = [...new Set(halfChecked)]
    },
    getAllCheckedList() {
      return this.allCheckedIds
    },
    getHalfCheckedList() {
      return this.halfCheckIds
    },
    // 数据加载成功
    onAsyncSuccess(event, treeId, treeNode, msg) {
      var objLoading = document.getElementById('Loading')
      objLoading.style.display = 'none'
      // this.cancelHalf(treeNode)
    },
    // 数据加载失败
    onAsyncError(
      event,
      treeId,
      treeNode,
      XMLHttpRequest,
      textStatus,
      errorThrown
    ) {
      var zTree = $.fn.zTree.getZTreeObj('treeDemo')
      this.$message.warning('数据加载失败！')
      treeNode.icon = ''
      zTree.updateNode(treeNode)
    },
    cancelHalf(treeNode) {
      if (treeNode.checkedEx) return
      if (treeNode.id) {
        this.listLeafDepts = this.listLeafDepts.filter(item => {
          return item !== treeNode.id
        })
      }
      this.halfCheckIds = this.listLeafDepts
      var zTree = $.fn.zTree.getZTreeObj('treeDemo')
      treeNode.halfCheck = false
      zTree.updateNode(treeNode)
    },

    // 清空数据
    refresh() {
      $.fn.zTree.init($('#treeDemo'), {}, (this.zNodes = []))
    },
    getTreeData() {
      this.zNodes = [
        {
          isParent: true,
          name: '全部',
          checked: false,
          pId: null,
          halfCheck: true,
          id: ''
        }
      ]
      $.fn.zTree.init($('#treeDemo'), this.setting, this.zNodes)
      var treeObj = $.fn.zTree.getZTreeObj('treeDemo')
      var nodes = treeObj.getNodes()
      for (var i = 0; i < nodes.length; i++) {
        //设置节点展开
        treeObj.expandNode(nodes[i], true, false, true)
      }
    }
  }
}
</script>
<style>
.zTreeLeft {
  height: 100%;
}
.ztree li span.button {
  background-image: url('~@/assets/imgs/check.png');
}

.ztree li span.button {
  width: 0px;
}
.ztree li span.button.chk {
  width: 14px;
  height: 14px;
  margin: 0 3px 0 0;
  cursor: pointer;
}
.ztree li span.button.chk.checkbox_false_full {
  background-position: -8px -10px;
}
.ztree li span.button.chk.checkbox_false_full_focus {
  background-position: -68px -10px;
}

.ztree li span.button.chk.checkbox_false_part {
  background-position: -28px -10px;
}
.ztree li span.button.chk.checkbox_false_part_focus {
  background-position: -28px -10px;
}

.ztree li span.button.chk.checkbox_true_full {
  background-position: -48px -10px;
}
.ztree li span.button.chk.checkbox_true_full_focus {
  background-position: -48px -10px;
}

.ztree li span.button.chk.checkbox_true_part {
  background-position: -28px -10px;
}
.ztree li span.button.chk.checkbox_true_part_focus {
  background-position: -28px -10px;
}

.ztree li span.button.ico_open {
  margin-right: 2px;
  background-position: -85px -10px;
  vertical-align: top;
  *vertical-align: middle;
}
.ztree li span.button.ico_close {
  margin-right: 2px;
  background-position: -99px -10px;
  vertical-align: top;
  *vertical-align: middle;
}
.ztree li span.button.roots_close {
  background-position: -99px -10px;
}
.ztree li span.button.roots_open {
  background-position: -85px -10px;
}

.ztree li span.button.center_close {
  background-position: -99px -10px;
}

.ztree li span.button.center_open {
  background-position: -85px -10px;
}

.ztree li span.button.center_docu {
  background-position: -120px -120px;
}

.ztree li span.button.bottom_close {
  background-position: -99px -10px;
}

.ztree li span.button.bottom_open {
  background-position: -85px -10px;
}

.ztree li span.button.root_open {
  background-position: -85px -10px;
}

.ztree li span.button.root_close {
  background-position: -99px -10px;
}
.ztree li ul.line {
  background: none;
}

.ztree li a {
  text-decoration: none;
  color: #606266;
}
.ztree li a:hover {
  text-decoration: none;
}

.el-loading-mask {
  position: absolute;
  top: 55px;
}
</style>
